<template>
  <div id="tools">
    <table>
      <tr>
        <td>
          <div class="responsive">
            <div class="img">
              <!--<a target="_blank" @click="to_cM('/cM/')">-->
                <nuxt-link :to="{name:'convertMoney'}">
                <img src="../assets/daxie-cu.png" alt="人民币大写在线转换工具" width="300" height="200">
                </nuxt-link>
              <div class="desc">人民币大写在线转换工具 </div>
            </div>
          </div>
        </td>
        <td>
          <div class="responsive">
            <div class="img">
              <!--<a target="_blank" @click="to_cM('/pwd/')">-->
              <nuxt-link :to="{name:'pwd'}">
                <img src="../assets/pwd-cu.png" alt="在线密码生成器" width="300" height="200">
              </nuxt-link>
              <div class="desc">在线密码生成器 </div>
            </div>
          </div>
        </td>
        <td>
          <div class="responsive">
            <div class="img">
              <!--<a target="_blank" @click="to_cM('/maken/')">-->
              <nuxt-link :to="{name:'makeNumber'}">
                <img src="../assets/coushu.png" alt="在线凑数工具" width="300" height="200">
              </nuxt-link>
              <div class="desc">在线凑数工具 </div>
            </div>
          </div>
        </td>
        <td>

        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: 'tools',
  data () {
    return {
    }
  },
  methods: {
    to_cM (url) {
      this.$router.push(url)
    }
  }

}

</script>

<style scoped>
  #tools {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
table{
  margin-left: auto;
  margin-right: auto;
}
  div.img {
    border: 1px solid #ccc;
  }

  div.img:hover {
    border: 1px solid #777;
  }

  div.img img {
    /*width: 100%;*/
    height: auto;
  }

  div.desc {
    padding: 15px;
    text-align: center;
  }

  * {
    box-sizing: border-box;
  }

  .responsive {
    padding: 0 6px;
    float: left;
    /*width: 24.99999%;*/
  }
a:hover{
    cursor:pointer
  }
</style>
